<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用函数</title>
    <!-- 一般引入js文件，都是在 head 标签内部 -->
    <script src="js/jquery-3.5.1.js"></script>
    <style type="text/css">
        .inner{
            background-color: aqua;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>

    <div style="background-color: red;" id="outer">
        <div id="inner"> </div>
    </div>
    <button type="button" onclick="change()">改变</button>
    <script type="text/javascript">
        function change() {
            // 基本上，jQuery 实例中 ，所有的方法都支持链式语法
            $("#outer").css("width", "300px").css("height", "200px");
            // 为 选中的 jQuery 实例增加 指定的 class 属性，同时，这个class 可以不存在
            $("#inner").addClass("inner").addClass("xxx") ;
        }
    </script>

</body>
</html>